<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 800px;
				height: 400px;
				border: 1px solid black;
				margin: 100px auto;
				position: relative;
			}
			.box .list li{
				list-style: none;
				
			}
			.box .list {
				display: block;
				width: 100%;
				height: 400px;
				
			}
			.box  .list li{
				width: 100%;
				height: 400px;
				position: absolute;
				display: none;
			}
			.box .list li:nth-child(1){
				display: block;
			}
			.box .list li a,img{
				display: block;
				width: 100%;
				height: 400px;
			}
			.btnLeft,.btnRight{
			    width: 30px;
			    height: 30px;
			    line-height: 30px;
			    text-align: center;
			    color: white;
			    font-size: 28px;
			    font-weight: bold;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				background: yellow;
			}
			.btnRight{
				right: 0;
			}
			.maodian{
				position: absolute;
				bottom: 20px;
				left: 50%;
				transform: translateX(-50%);
				clear: both;
			}
			.maodian li{
				float: left;
				list-style: none;
				width: 50px;
				height: 50px;
				text-align: center;
				line-height: 50px;
				color: white;
				background: orange;
				border-radius: 50%;
				margin-right: 10px;	
			}
			.maodian .on{
				background: red;
				color: black;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul class="list">
				<li>
					<a href="#"><img src="img/0.jpg" alt="" /></a>
				</li>
				<li>
					<a href="#"><img src="img/1.jpg" alt="" /></a>
				</li>
				<li>
					<a href="#"><img src="img/2.jpg" alt="" /></a>
				</li>
				<li>
					<a href="#"><img src="img/3.jpg" alt="" /></a>
				</li>
				<li>
					<a href="#"><img src="img/4.jpg" alt="" /></a>
				</li>
			</ul>
				<span class="btnLeft"><<</span>
				<span class="btnRight">>></span>
				<ul class="maodian">
					<li class="on">1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
				</ul>
		</div>
	</body>
	<script src="jquery-1.10.1.min.js"></script>
	<script>
		
		var btnLeft = $(".btnLeft");
		var btnRight = $(".btnRight");
		var lis = $(".list li")
		var maodians = $(".maodian li")
		console.log(lis)
		var index = 0;
		
		//左按钮
		btnRight.click(function(){
			
		if(lis.is(":animated")){
			return;
		}
		 lis.eq(index).fadeOut(500);
		 maodians.eq(index).removeClass("on");
		  index++;
			 if(index>4){
			 	index=0;
			 }
		 lis.eq(index).fadeIn(500);
		 maodians.eq(index).addClass("on")
		})
		
		//右按钮
		btnLeft.click(function(){
			if(lis.is(":animated")){
				return;
			}
			lis.eq(index).fadeOut(500);
			 maodians.eq(index).removeClass("on");
		     index--;
			if(index<0){
				index = 4;
			}
			
			lis.eq(index).fadeIn(500);
			maodians.eq(index).addClass("on")
		})
			maodians.click(function(){
//			if(lis.is(":animated")){
//				return;
//			}
			lis.eq(index).fadeOut(500);
			maodians.eq(index).removeClass("on");	
			
		    index = $(this).index();
			
			lis.eq(index).fadeIn(500);
			maodians.eq(index).addClass("on")	
				
			});
		var temer = setInterval(function(){
			lis.eq(index).fadeOut();
			maodians.eq(index).removeClass("on");
			index++;
			if(index>4){
				index =0;
			}
			lis.eq(index).fadeIn();
			maodians.eq(index).addClass("on")
		},5000)
		
		
		/*
		 
		 * 
		 * 
		 * 
		 * 
		 * 
		 * 
		 * 
		 * */
	</script>
</html>
